<template>
  <section id="topSelect">
   <!-- <el-form :inline="true" :model="formData">
      <el-form-item label="">
        <el-button type="primary" @click="showLabel('city')">县村选择</el-button>
        <span class="city-name">{{formData.cityName}}</span>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="showLabel('office')">机关选择</el-button>
        <span class="city-name">{{formData.office}}</span>
      </el-form-item>
      <el-form-item label="企业选择">
        <el-select v-model="formData.business" placeholder="请选择" @change="choose('business')">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <slot name="expendItem"></slot>
    </el-form>-->
    <ul class="btn-list">
      <li v-if="cType=='all' || cType=='township'">
        <el-button type="primary" @click="showLabel('city')">县村选择</el-button>
        <span class="city-name">{{formData.cityName}}</span>
      </li>
      <li v-if="cType=='all' || cType=='par'">
        <el-button type="primary" @click="showLabel('office')">机关选择</el-button>
        <span class="city-name">{{formData.office}}</span>
      </li>
      <li v-if="cType=='all' || cType=='busi'">
        <span class="labelTit">企业选择</span>
        <el-select v-model="formData.business" placeholder="请选择" @change="choose('business')">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </li>
    </ul>
    <!--弹窗-县村选择树结构-->
    <cityTree ref="cityTree" @getCityName="getCityName"></cityTree>
    <busiTree ref="busiTree" @getBusiName="getBusiName"></busiTree>
  </section>
</template>
<script>
  import cityTree from "@common/cityTree"// 县村选择树结构
  import busiTree from "@common/busiTree"// 机关选择树结构
  export default {
    name: "topSelect",
    msg: "顶部筛选条件",
    props: ["cType"],//显示那些内容 "all"-全部;"township"-乡镇;"busi"-企业;"par"-机关
    data() {
      return {
        formData: {
          cityName: "",
          business: "",
          office: ""
        }
      }
    },
    methods: {
      /*显示关联分类弹窗*/
      showLabel(type) {
        if (type=="office") {//机关选择树结构
          this.$refs.busiTree.showModel();
        }else{ // 县村选择树结构
          this.$refs.cityTree.showModel();
        }
      },
      /*获取乡镇名称*/
      getCityName(selectNode) {
        this.formData.office = "";
        this.formData.business = "";
        this.formData.cityName = selectNode.name;
        this.$emit("getData", this.formData)
      },
      /*获取机关名称*/
      getBusiName(selectNode) {
        this.formData.business = "";
        this.formData.cityName = "";
        this.formData.office = selectNode.name;
       /* this.$emit("getData", this.formData)*/
      },
      /*下拉框选择*/
      choose() {
        this.formData.cityName = "";
        this.formData.office = "";
        /*this.$emit("getData", this.formData)*/
      }
    },
    components: {
      cityTree,
      busiTree
    }
  }
</script>

<style lang="less">
  #topSelect {
    .btn-list{
      float: left;
      li{
        float:left;
        span.labelTit{
          font-size: 14px;
          margin: 0 8px 0 15px;
          color: #606266;
        }
      }
      .city-name {
        margin: 0 15px 0 8px;
        color: #666;
      }
    }
  }
</style>
